<template>
  <!--
      	作者：luoyiming
      	时间：2019-06-04
      	描述：插件中心-优惠券-优惠券列表-添加优惠券
      -->
  <div class="user">
    <div class="common-form">新增活动会场</div>
    <div class="product-content">
      <el-form ref="form" :model="form" :rules="formRules" label-width="150px">
        <el-form-item label="活动标题" prop="name" :rules="[{ required: true, message: ' ' }]">
          <el-input type="text" v-model="form.name" placeholder="请输入活动标题" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item label="分享标题" prop="share_title" :rules="[{required: true,message: ' '}]">
          <el-input type="text" v-model="form.share_title" placeholder="请输入分享标题" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item label="分享内容" prop="share_desc" :rules="[{required: true,message: ' '}]">
          <el-input type="text" v-model="form.share_desc" placeholder="请输入分享内容" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item label="背景图" prop="image_id">
          <el-row>
            <el-button type="primary" @click="openUpload('image')">选择图片</el-button>
            <div v-if="form.image_id!=''" class="img">
              <img :src="file_path" width="100" height="100" />
            </div>
          </el-row>
        </el-form-item>
        <el-form-item label="分享图" prop="share_image_id">
          <el-row>
            <el-button type="primary" @click="openUpload('share')">选择图片</el-button>
            <div v-if="form.share_image_id!=''" class="img">
              <img :src="share_file_path" width="100" height="100" />
            </div>
          </el-row>
        </el-form-item>
        <el-form-item label="活动日期" prop="value1" :rules="[{required: true,message: ' '}]">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker v-model="form.value1" type="datetimerange"  value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="个人中心状态">
          <div>
            <el-radio v-model="form.is_show" :label="1">显示</el-radio>
            <el-radio v-model="form.is_show" :label="0">隐藏</el-radio>
          </div>
        </el-form-item>
        <div class="common-form">邀请成功的条件</div>
        <el-form-item label="邀请成功的条件 ">
        <el-radio v-model="form.inv_condition" label="0">邀请成为会员</el-radio>
        <el-radio v-model="form.inv_condition" label="1">邀请成为会员且消费</el-radio>
        </el-form-item>

        <div class="common-form">礼品设置</div>
        <div v-for="(item, reward_index) in rewardData" :key="reward_index">
          <el-form-item label="奖励">
            <el-input type="number" v-model="item.invitation_num" class="max-w460">
              <template slot="prepend">
                每邀请
              </template>
              <template slot="append">
                人获得礼品
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="礼品">
            <el-checkbox v-model="item.is_point">积分</el-checkbox>
            <el-input type="number" v-model="item.point" class="max-w460">
              <template slot="append">
                积分
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox v-model="item.is_coupon">优惠券</el-checkbox>
            <el-input type="text" v-model="item.coupon_name" class="max-w460"></el-input>
            <el-button type="primary" @click="addCoupon(reward_index)">选择优惠券</el-button>
          </el-form-item>
        </div>

        <el-form-item label=""><el-button type="primary" @click="addInv">添加奖励项</el-button></el-form-item>
      </el-form>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="info" @click="gotoBack">返回</el-button>
        <el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </div>
    <!--上传图片组件-->
    <Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
    <!--选择优惠券-->
    <GetCoupon v-if="open_add" :open_add="open_add" @closeDialog="closeProductDialogFunc($event)">选择优惠券弹出层</GetCoupon>
  </div>
</template>
<script>
import InvitationGiftApi from '@/api/invitationgift.js';
import GetCoupon from '@/components/coupon/GetCoupon';
import Upload from '@/components/file/Upload';
export default {
  components: {
    /*选择优惠券件*/
    GetCoupon,
    Upload
  },
  data() {
    return {
      form: {
        name: '',
        inv_condition: '0',
        value1: [],
        image_id: '',
        is_show:1,
        share_image_id:'',
        share_title: '',
        share_desc: ''
      },
      /*优惠券*/
      tableData: [],
      loading: false,
      open_add: false,
      /*奖励列表*/
      rewardData: [],
      coupon_index: 0,
      /*是否打开图片选择*/
      isupload: false,
      formRules: {
        image_id: [{
          required: true,
          message: '请上传背景图',
          trigger: 'blur'
        }],
        share_image_id: [{
          required: true,
          message: '请上传分享图',
          trigger: 'blur'
        }],
      },
    };
  },
  created() {},
  methods: {
    /*添加奖励*/
    addInv() {
      let obj = {
        invitation_num: 1,
        is_coupon: false,
        point: 0,
        is_point: false,
        coupon_ids: '',
        coupon_name: ''
      };
      this.rewardData.push(obj);
    },
    /*添加优惠券*/
    addCoupon(reward_index) {
      this.open_add = true;
      this.coupon_index = reward_index;
    },

    /*关闭优惠券*/
    closeProductDialogFunc(e) {
        let self = this;
        let index = self.coupon_index;
        self.open_add = e.openDialog;
        let n=self.rewardData[index].coupon_name.indexOf(e.params.name);
        if(n==-1){
          self.rewardData[index].coupon_ids +=  e.params.coupon_id+',';
		  if(self.rewardData[index].coupon_name==''){
			  self.rewardData[index].coupon_name += e.params.name;
		  }else{
			  self.rewardData[index].coupon_name += ','+ e.params.name;
		  }

        }else{
          self.$message.error('请勿重复添加');
        }
    },
    /*提交表单*/
    onSubmit() {
      let self = this;
      let form = self.form;
      form.reward_data = self.rewardData;
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          InvitationGiftApi.addInvitation(form, true)
            .then(data => {
              self.loading = false;
              if (data.code == 1) {
                self.$message({
                  message: data.msg,
                  type: 'success'
                });
                self.$router.push('/plus/invitation/index');
              } else {
                self.loading = false;
              }
            })
            .catch(error => {
              self.loading = false;
            });
        }
      });
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {

        if(this.type=="image"){
         this.file_path = e[0].file_path;
         this.form.image_id = e[0].file_id;
        }else if(this.type=="share"){
         this.share_file_path = e[0].file_path;
         this.form.share_image_id = e[0].file_id;
        }
      }
      this.isupload = false;
    },
    /*返回上一页面*/
    gotoBack(){
      this.$router.back(-1);
    },
  }
};
</script>
